<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <title>课堂移动端</title>
    <!-- 页面样式文件 -->
    <link rel="stylesheet" href="./index.css">
    <!-- 插件相关文件 -->
    <link rel="stylesheet" href="./flexible.css">
    <script src="./flexible.js"></script>
    <!-- swiper插件css文件 -->
    <link rel="stylesheet" href="https://3.swiper.com.cn/dist/css/swiper.min.css">
    <!-- 矢量图标 -->
    <link rel="stylesheet" href="http://s3plus.meituan.net/v1/mss_e2821d7f0cfe4ac1bf9202ecf9590e67/cdn-prod/file:d5896c44/touch/css/iconfont/iconfont.6dae7b05.css">
    <script src="./jquery.js"></script>
    <script>
        $(document).ready(function(){
            /*1、汉堡包*/
            $('.navList').on('click',function(){
                $('.header+.mask').fadeToggle(400,function(){
                    console.log($('.header+.mask'))//输出蒙版mask对象相关的参数
                    var maskHeight = $('.header+.mask')[0].clientHeight;//获取蒙版的高度
                    if(maskHeight == 0){
                        /*当蒙版隐藏时，恢复页面上下滑动*/
                        $('html,body').css({'overflow-y':'auto'});
                    }else{
                        /*当蒙版显示时，禁止页面上下滑动*/
                        $('html,body').css({'overflow-y':'hidden'});
                    }
                });
                $('.slide_nav_list').slideToggle();
            })
            /*2、jQuery版的返回顶部*/
            $('.go_back').on('click',function(){
                $("html,body").animate({scrollTop:0},500,function(){
                    console.log('返回顶部完毕')
                }); 
            })
            $(window).scroll( function() { 
                var scrollValue=$(window).scrollTop();
                scrollValue > 100 ? $('.go_back').fadeIn():$('.go_back').fadeOut();
            });  
        })
    </script>
</head>
<body>
    <!-- 导航 -->
    <div class="header">
        <!-- 左侧logo -->
        <h3 class="logo">课堂</h3>
        <!-- 中间搜索框 -->
        <div class="search">
            <img src="https://p0.meituan.net/travelcube/99c29829cf1b85d5cdbc76a1bd0b7329814.png" alt="">
            <!-- input框禁止输入---H5新增属性readonly（只读）、disabled（禁止-石化效果，添加石化的淡灰色背景） -->
            <input class="toSearch" type="text" readonly placeholder="请输入关键字">
        </div>
        <!-- 右侧汉堡包--快捷导航 -->
        <div class="navList">
            <!-- 自己绘制 -->
            <span></span>
            <span></span>
            <span></span>
            <!-- 
                或者使用图片 
                <img src="" alt="">
            -->
        </div>
        <!-- 下拉二级导航列表 -->
        <ol class="slide_nav_list">
            <li><a href="">首页</a></li>
            <li><a href="">同步课程</a></li>
            <li><a href="">在线练习</a></li>
            <li><a href="">精品课程</a></li>
        </ol>
    </div>
    <!-- 整屏蒙版 -->
    <div class="mask"></div>
    <!-- banner轮播图 -->
    <div class="banner">
        <div class="swiper-container">
            <!-- 容器 -->
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="https://img0.baidu.com/it/u=3633169264,400359425&fm=26&fmt=auto" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="https://img1.baidu.com/it/u=3270480558,4101703262&fm=26&fmt=auto" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="https://img1.baidu.com/it/u=1077590273,2368997731&fm=26&fmt=auto" alt="">
                </div>
            </div>
            <!-- 焦点 -->
            <div class="swiper-pagination"></div>
        </div>
    </div>
    <!-- 操作选项列表 -->
    <div class="control_list">
        <ul>
            <li>
                <div class="iconfont meishi"></div>
                <p>美食</p>
            </li>
            <li>
                <div class="iconfont dianying"></div>
                <p>猫眼电影</p>
            </li>
            <li>
                <div class="iconfont jiudian"></div>
                <p>酒店</p>
            </li>
            <li>
                <div class="iconfont xiuxianyule"></div>
                <p>休闲娱乐</p>
            </li>
            <li>
                <div class="iconfont waimai"></div>
                <p>外卖</p>
            </li>
            <li>
                <div class="iconfont ktv"></div>
                <p>KTV</p>
            </li>
            <li>
                <div class="iconfont zhoubianyou"></div>
                <p>周边游</p>
            </li>
            <li>
                <div class="iconfont liren"></div>
                <p>丽人</p>
            </li>
            <li>
                <div class="iconfont liren"></div>
                <p>母婴亲子</p>
            </li>
            <li>
                <div class="iconfont quanbu"></div>
                <p>全部分类</p>
            </li>
        </ul>
    </div>
    <!-- 同步课程 -->
    <div class="sync_course">
        <!-- 顶部 -->
        <div class="sync_course_top">
            <span>同步课程</span>
            <a href="">更多课程 <u>&gt;</u></a>
        </div>
        <!-- 底部 -->
        <ul class="sync_course_bottom">
            <li>
                <!-- 上 -->
                <div class="course_top">
                    <img src="./img/index/banner1.png" alt="">
                    <div>人教版</div>
                    <div>100人在学习</div>
                </div>
                <!-- 下 -->
                <div class="course_bottom">
                    <!-- 下---左 -->
                    <div>
                        <p>行政管理专业班</p>
                        <p>23课时</p>
                    </div>
                    <!-- 下---右 -->
                    <button>免费学习</button>
                </div>
            </li>
            <li>
                <!-- 上 -->
                <div class="course_top">
                    <img src="./img/index/banner1.png" alt="">
                    <div>人教版</div>
                    <div>100人在学习</div>
                </div>
                <!-- 下 -->
                <div class="course_bottom">
                    <!-- 下---左 -->
                    <div>
                        <p>行政管理专业班</p>
                        <p>23课时</p>
                    </div>
                    <!-- 下---右 -->
                    <button>免费学习</button>
                </div>
            </li>
            <li>
                <!-- 上 -->
                <div class="course_top">
                    <img src="./img/index/banner1.png" alt="">
                    <div>人教版</div>
                    <div>100人在学习</div>
                </div>
                <!-- 下 -->
                <div class="course_bottom">
                    <!-- 下---左 -->
                    <div>
                        <p>行政管理专业班</p>
                        <p>23课时</p>
                    </div>
                    <!-- 下---右 -->
                    <button>免费学习</button>
                </div>
            </li>
            
        </ul>
    </div>
    <!-- 课程分类 -->
    <div class="course_classify">
        <a href="">
            <img src="./img/index/foot1.png" alt="">
        </a>
        <a href="">
            <img src="./img/index/foot2.png" alt="">
        </a>
        <a href="">
            <img src="./img/index/foot3.png" alt="">
        </a>
    </div>
    <!-- 底部导航：网站备案、法人、备案信息 -->
    <div class="footer">
        <a href="">京ICP备 13030888号</a>
    </div>
    <!-- 返回顶部按钮 -->
    <button class="go_back">&lt;</button>
    <script src="./index.js"></script>
    <!-- swiper插件js文件 -->
    <script src="https://3.swiper.com.cn/dist/js/swiper.min.js"></script>
    <!-- swiper的js插件的引用 -->
    <script> 
        var mySwiper = new Swiper('.swiper-container', {
            autoplay: 5000,//可选选项，自动滑动,时间间隔5s
            loop:true,//无缝滑动
            pagination : '.swiper-pagination',//焦点
        })
    </script>
</body>
</html>